<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <table border="1" width=400 align="center">
        <tr>
            <td>DATA</td>
            <td>DATA</td>
            <td>DATA</td>
            <td>DATA</td>
            <td>DATA</td>
        </tr>
        <tr>
            <td>DATA</td>
            <td>DATA</td>
            <td>DATA</td>
            <td>DATA</td>
            <td>DATA</td>
        </tr>
        <tr>
            <td>DATA</td>
            <td>DATA</td>
            <td>DATA</td>
            <td>DATA</td>
            <td>DATA</td>
        </tr>
        <tr>
            <td>DATA</td>
            <td>DATA</td>
            <td>DATA</td>
            <td>DATA</td>
            <td>DATA</td>
        </tr>
    </table>
</body>
<script>

    var atd = document.querySelectorAll("td");

    for(var i=0;i<atd.length;i++){
        atd[i].onclick = function(){
            // 创建元素
            var ipt = document.createElement("input");
            // 设置元素的value为td内容
            ipt.value = this.innerHTML;
            // 清空td内容
            this.innerHTML = "";
            // 将输入框插入td
            this.appendChild(ipt);
            // 阻止输入框的事件冒泡（防止重复触发td的事件）
            ipt.onclick = function(eve){
                eve.stopPropagation();
            }
            // 执行会自动获取焦点
            ipt.focus();
            // 将当前函数的this保存成变量
            var that = this;
            ipt.onblur = function(){
                // 通过外部的this（that）找到td设置内容为当前this的value
                that.innerHTML = this.value;
            }
        }
    }

    // this：当前函数的执行对象
    
</script>
</html>